<template>
  <div>
    <router-link to="/" tag="div" class="header-abs" v-show="!showFixed">
      <span class="iconfont icon-fanhui"></span>
    </router-link>
    <div class="header-fixed" v-show="showFixed" :style="opacityStyle">
      <router-link to="/">
        <span class="iconfont icon-fanhui"></span>
      </router-link>
      <span>景点详情</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    activated () {
      window.addEventListener('scroll', this.handleScroll)
    },
    deactivated () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    data () {
      return {
        showFixed: false,
        opacityStyle: {
          opacity: 0
        }
      }
    },
    methods: {
      handleScroll () {
        let top = document.documentElement.scrollTop
        console.log(top)
        if (top > 60) {
          this.opacityStyle.opacity = Math.min(1, top / 140)
          this.showFixed = true
        } else {
          this.showFixed = false
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~css/variable.styl"

  .header-abs
    text-align center
    line-height: .8rem
    position absolute
    top .2rem
    left .2rem
    width: .8rem
    height: .8rem
    background rgba(0, 0, 0, .8)
    border-radius .4rem
    color #fff
    font-size .4rem

  .header-fixed
    position fixed
    top 0
    left 0
    right 0
    line-height: .86rem
    height: .86rem
    background $color-theme
    text-align center
    color #fff
    font-size .32rem
    .icon-fanhui
      position absolute
      top 0
      left 0
      font-size .4rem
      color #fff
</style>
